<template>
	<div class="app">
		<button @click="n++">点我n+1</button>
		<h1>（插值语法实现的）当前的n值是：{{n}}</h1>
		<h1>
			（指令实现的）当前的n值是：<span v-text="n"></span>
		</h1>
		<h1>
			（自定义指令实现的）当前的n值是：<span v-big="n"></span>
		</h1>
		<h1>
			（自定义指令实现的）当前订单总金额：<span v-order="price"></span>
		</h1>
		<h1>
			（自定义指令实现的）当前的n值是：<span v-very-big="n"></span>
		</h1>
		<Child></Child>
	</div>
</template>

<script>
	import Child from './Child.vue'
	export default {
		name:'App',
		components:{Child},
		data() {
			return {
				n:5,
				price:10000
			}
		},
		directives:{
			//1.big方法何时调用？—— 当有人使用v-big指令的时候。
			//2.big方法中的this是谁？—— 
			/* big(element,binding){
				// console.log(element)
				// console.log(binding.value)
				element.innerText = binding.value * 10
			}, */
			order(element,binding){
				element.innerText = binding.value
				if(binding.value >= 10000){
					element.style.backgroundColor = 'red'
					element.style.color = 'yellow'
				}else{
					element.style.backgroundColor = 'gray'
					element.style.color = 'orange'
				}
			},
			'very-big'(element,binding){
				element.innerText = binding.value * 100
			}
		}
	}
</script>

<style>
	.app{
		background-color: gray;
		padding: 20px;
	}
</style>